<template>
    <div>
        <div style="position:fixed;z-index:100;width:100%">
            <div style="position:fixed;width:100%;padding:2px;height: 69px;"
                class="van-cell--borderless van-contact-card">
                <van-dropdown-menu title="班级选择" style="height:69px">
                    <van-dropdown-item v-model="classId" :options="classInfos" @change="changeClass" />
                </van-dropdown-menu>
            </div>
        </div>
        <div v-show="show == 0">
            <div style="height: 73px"></div>
            <div role="button" tabindex="0" index="0" v-for="(item, index) in videos" :item="item"
                @click="intoVideoPlay(item)"
                class="van-cell van-cell--clickable van-cell--center van-cell--borderless van-contact-card van-contact-card--edit">
                <i class="van-icon van-icon-contact van-cell__left-icon" />
                <div class="van-cell__value van-cell__value--alone van-contact-card__value">
                    <div>视频名称:{{ item.videoName }}</div>
                    <div>视频描述:{{ item.content }}</div>
                </div>
                <i class="van-icon van-icon-arrow van-cell__right-icon" />
            </div>
            <div style="height: 73px"></div>
        </div>
        <div v-show="show == 1">
            <div style="height: 80px"></div>
            <video :src="videoUrl" width="100%" controls></video>
            <div style="margin: 16px;">
                <van-button round block type="primary" @click="back">返回列表</van-button>
            </div>
        </div>
    </div>
</template>
<style>
.van-dropdown-menu__bar {
    height: 68px;
}
</style>
<script>
import req from '../../request/index'
export default {
    name: '',
    data() {
        return {
            classId: '',
            classInfos: [],
            className: '0',
            videos:[],
            videoUrl:'',
            show:0,
        };
    },
    methods: {
        back(){
            this.show = 0;
            this.videoUrl = '';
        },
        intoVideoPlay(item){
            this.show = 1;
            if(item.videoUrl != null){
                this.videoUrl = "/api/getVideo?url="+item.videoUrl;
            }
        },
        getVideos(){
            req({
                url: "getVideos",
                method: "post",
                data: {
                    status: this.classId
                }
            }).then(res => {
                if (res.data.code == 0) {
                    this.videos = res.data.data
                }
            }).catch(err => {
                console.log(err);
            })
        },
        changeClass(res) {
            for (var i = 0; i < this.classInfos.length; i++) {
                if (this.classInfos[i].value == res) {
                    this.className = this.classInfos[i].text;
                    this.getVideos()
                }
            }
        },
        getClassInfo() {
            req({
                url: "getClassInfo",
                method: "post",
                data: {
                    id: this.$store.state.user.id
                }
            }).then(res => {
                if (res.data.code == 0) {
                    var data = res.data.data;
                    this.classId = res.data.data[0].id;
                    this.className = res.data.data[0].name;
                    for (var i = 0; i < data.length; i++) {
                        var x = { text: '班级1', value: 0 };
                        x.text = data[i].name;
                        x.value = data[i].id;
                        this.classInfos.push(x);
                    }
                    this.getVideos()
                }
            }).catch(err => {
                console.log(err);
            })
        },
    },
    computed: {
    },
    mounted() {
        this.getClassInfo()
    },
}
</script>